﻿@model CMS.Web.Engine.IPageModel

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <style type="text/css">
        body { font-family: Arial, Verdana, Tahoma; font-size: 17px; }            
        .osnovacms-widget { border: 1px solid #ffbbbb; padding: 2px; margin: 5px; }              
        .osnovacms-widget-header { padding: 2px 4px; background-color: #ffbbbb; cursor: move; }        
        .osnovacms-zone { border: 1px solid #00faff; vertical-align: top; padding: 2px; }
        .osnovacms-zone-header { padding: 2px 5px; color: #ffffff; background-color: #00faff; text-align: center; cursor: pointer; }
        .osnovacms-zone-header:hover { color: #f9f9f9; }
        .osnovacms-zone-header:active { position: relative; top: 1px; left: 1px; }
        .osnovacms-widget-edit, .osnovacms-widget-delete { cursor: pointer; color: Blue; text-decoration: underline; }        
        .ui-widget { font-family: Arial, Verdana, Tahoma; font-size: 15px; }        
        .ui-widget-overlay { position: fixed; }
    </style>
    <script type="text/javascript">      
        $(function () {
            $(".osnovacms-zone").sortable({
                items: ".osnovacms-widget",
                connectWith: ".osnovacms-zone",
                cursor: "move",
                opacity: 0.5,
                revert: true,
                update: function (event, sender) {
                    $.post("/page/layout/@Model.ID", getLayoutData($(this)), function (data, xmlHttp) {
                        status = data;
                    }, "html");
                }
            });
            function getLayoutData($zone) {
                var data = { zone: $zone.find(".osnovacms-zone-header").text(), widgets: [] };
                $zone.find(".osnovacms-widget").each(function () {
                    data.widgets[data.widgets.length] = $(this).attr("widget");
                });
                data.widgets = data.widgets.join();
                return data;
            }
            $(".osnovacms-widget-header, .osnovacms-zone-header").disableSelection();
            $(".osnovacms-zone-header").click(function () {
                widgetAdd(@Model.ID, $(this).text());
            });
            $(".osnovacms-widget-edit").click(function () {
                widgetEdit($(this).parent().attr("widget"));
            });
            $(".osnovacms-widget-delete").click(function () {
                if (confirm("Удалить виджет?"))
                    widgetDelete($(this).parent().attr("widget"));
            });
            function widgetDelete(id) {       
                $.post("/widget/delete/" + id, $(this).find("form").serialize(), function (data, xmlHttp) {
                    location.assign(location.href);
                }); 
            }
            function widgetAdd(page, zone) {
                if ($("#addWidget").length == 0)
                    $("body").append("<div id=\"addWidget\" title=\"Добавить виджет\"></div>");
                $("#addWidget").load("/widget/add", function () {
                    $(this).find("input#zone").val(zone);
                    $(this).find("input#page").val(page);
                    $(this).dialog({
                        resizable: false, height: 500, width: 800, modal: true,
                        buttons: {
                            "Сохранить": function () {                                
                                $.post("/widget/add", $(this).find("form").serialize(), function (data, xmlHttp) {
                                    location.assign(location.href);
                                }, "html");
                            },
                            "Отмена": function () { $(this).dialog("close"); }
                        }
                    });
                });
            }
            function widgetEdit(id) {               
                if ($("#widgetEdit").length == 0)
                    $("body").append("<div id=\"widgetEdit\" title=\"Настройки виджета\"></div>");
                $("#widgetEdit").load("/widget/edit/" + id, function () {
                    $(this).dialog({
                        resizable: false, height: 500, width: 800, modal: true,
                        buttons: {
                            "Сохранить": function () {
                                $.post("/widget/edit/" + id, $(this).find("form").serialize(), function (data, xmlHttp) {
                                    location.assign(location.href);
                                }, "html");
                            },
                            "Отмена": function () { $(this).dialog("close"); }
                        }
                    });
                });
            }
        });     
    </script>
</head>
<body style="padding: 50px;">       
    <div id="content">   
        <table style="width: 100%;">
            <tr>
                @Html.Zone(Model, "Верхний колонтитул", ZoneTag.Td, new { colspan = 3 })
            </tr>
            <tr>
                @Html.Zone(Model, "Левое меню", ZoneTag.Td, new { style = "width: 250px;" })
                @Html.Zone(Model, "Центральная часть", ZoneTag.Td)
                @Html.Zone(Model, "Правая колонка", ZoneTag.Td, new { style = "width: 250px;" })
            </tr>
            <tr>
                @Html.Zone(Model, "Нижний колонтитул", ZoneTag.Td, new { colspan = 3 })
            </tr>       
        </table> 
     </div>         
</body>
</html>